<html>

<head>
    <script src="node_modules/d3/dist/d3.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="js.build.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #logo,
        #logo-dark {
            height: 200px;
            margin-top: 100px;
            overflow: hidden;
            padding: 10px;
        }

        svg {
            border-style: solid;
            border-color: white;
            border-width: 2px;
        }

        #text,
        #text-dark {
            height: 200px;
            margin-top: 100px;
            overflow: hidden;
            padding: 10px;
        }

        .dark {
            background-color: #1a202c;
            margin-top: 20px;
            padding-top: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="text"></div>
    <div id="logo"></div>

    <!-- Ensure the logo also looks good on dark background -->
    <div class="dark">
        <div id="text-dark"></div>
        <div id="logo-dark"></div>
    </div>
</body>
<script>
    renderLogo('#logo', false);
    renderLogo('#text', true);
    renderLogo('#logo-dark', false);
    renderLogo('#text-dark', true);
</script>


</html>
